<template>
  <view>
    <t-cell
      v-if="showCell"
      :title="title"
      arrow
      :note="valueModel"
      @click="show"
    />

    <!-- @close="onClose" -->
    <!-- @select="handleSelect" -->
    <t-calendar
      v-model:visible="visibleModel"
      :value="dateVal"
      :minDate="minDate"
      :maxDate="maxDate"
      @confirm="handleConfirm"
    />
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed } from "vue";
import { useVModel } from "@vueuse/core";
import dayjs from "dayjs";
import { isBoolean } from "lodash-es";

const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  showCell: {
    type: Boolean,
    default: true,
  },
  visible: {
    type: [String, Boolean],
    default: "",
  },

  disabled: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "单个选择日期",
  },
});
const emits = defineEmits(["update:value", "update:visible"]);

const valueModel = useVModel(props, "value", emits);
const dateVal = computed(() => {
  return valueModel.value ? dayjs(valueModel.value).toDate() : new Date();
});

const visibleModel = isBoolean(props.visible)
  ? useVModel(props, "visible", emits)
  : ref(false);
// 向前三年
const minDate = dayjs().subtract(3, "year").toDate();
// 向后三年
const maxDate = dayjs().add(3, "year").toDate();

const handleConfirm = (val) => {
  //   console.log(val);
  valueModel.value = dayjs(val).format("YYYY-MM-DD");
};

const show = () => {
  if (props.disabled) return;

  visibleModel.value = true;
};

/* const handleSelect = (val) => {
  console.log(val);
};
const onClose = (trigger) => {
  console.log("closed by", trigger);
}; */
</script>

<style lang="less" scoped></style>
